<template>
	<view>
		<u-navbar title="开通会员" :is-back="true" title-color="#111111" :background="background"></u-navbar>
		<view class="">
			<view class="flex-row items-center self-center flex-1 member-info">
				<view class="avatar-wrap flex-row justify-center items-center">
					<image class="image_2" :src="avatar" />
				</view>

				<view class="flex-col items-start ml-13-5  flex-1">
					<text class="font">{{nickname}}</text>
					<view class="flex-row">
						<view v-if="level == 0" class="flex-row items-center user-level-btn">
							<image class="user-level-img"
								src="https://heigeng.axu9.com/images/user-level-icon.png" />
							<text class="">普通用户</text>
						</view>
						<view v-if="level == 1" class="flex-row items-center user-level-btn">
							<image class="user-level-img"
								src="https://heigeng.axu9.com/images/user-level-icon.png" />
							<text class="">激活用户</text>
						</view>
						<view v-if="level == 2" class="flex-row items-center justify-center user-level-btn-yin">

							<text class="">银牌</text>
						</view>
						<view v-if="level == 3" class="flex-row items-center justify-center user-level-btn-jin">

							<text class="">金牌</text>
						</view>
						<view class="slot-content flex-row ml-10">
							<view class="mobile" v-if="!mobile" style="" @click="openBindPhone">请授权手机号
							</view>
							<view class="mobile" v-if="mobile" style="">手机号：{{mobile}}</view>
						</view>
					</view>

				</view>
			</view>
			<view class="content">
				<view class="flex-row items-end">
					<!-- <view @click="changeTabs(0)" class=" flex-row justify-center items-center" :class="current == 0 ? 'recharge1' : 'taocan'">
						套餐
					</view>
					<view @click="changeTabs(1)" :class="current == 1 ? 'recharge' : 'taocan ml-45'" class=" flex-row justify-center items-center">
						充值
					</view> -->
					<view @click="changeTabs(0)" :class="current == 0 ? 'recharge1' : 'taocan'"
						class=" flex-row justify-center items-center">
						充值
					</view>
					<view class=" flex-row justify-center items-center"
						:class="current == 1 ? 'recharge' : 'taocan ml-45'">
						套餐
					</view>

				</view>
				<view class="option flex-row" v-if="current == 1">
					<view class="list-item flex-col item-center"
						:class="currentT == index ? 'list-item-active' : 'list-item-unactive'"
						v-for="(item,index) in taocanList" :key="index" @click="changeTaocan(item,index)">
						<view class="flex-col item-center justify-center list-item-top">
							<view class="title flex-row justify-center">
								{{item.title}}
							</view>
							<view class="new-price flex-row justify-center items-end">
								<text class="money-unit">￥</text>
								<text class="money-num">{{item.price}}</text>
							</view>
							<view class="old-price flex-row justify-center">
								<text class="old-price-text">克隆声音：{{item.yinseNum}}</text>
								<!-- <text>￥</text>
								<text class="old-price-num">{{item.oldPrice}}</text> -->
							</view>
						</view>
						<view class="bottom flex-row justify-center"
							:class="currentT == index ? 'bottom-active' : 'bottom-unactive'">
							算力：{{item.intergel}}
						</view>
					</view>
				</view>
				<view class="recharg-option" v-if="current == 0">
					<view class="tabs-recharge flex-row justify-center">
						<view class="tabs-recharge-item flex-row justify-center"
							:class="rechargeTabs == index ? 'recharge-tabs-active' : 'recharge-tabs-unactive'"
							v-for="(item,index) in rechargeTabsList" :key="index" @click="changeRechargTabs(index)">
							{{item}}
						</view>
					</view>
					<view class="recharge-con">
						<view class="recharge-con-top" v-if="rechargeTabs == 0">
							<view class="recharge-con-title flex-row items-center justify-center">
								<image class="recharge-icon"
									src="https://heigeng.axu9.com/images/membership-recharge-icon1.png" mode="">
								</image>
								<text>充值音色</text>
							</view>
							<view class="flex-row justify-center">
								<!-- <u-number-box v-model="rechargeNum" @change="rechargeNumChange"></u-number-box> -->
								<numberBox @change="rechargeNumChange"></numberBox>
							</view>
						</view>
						<view class="recharge-con-top1 flex-row item-center justify-center" v-if="rechargeTabs == 1">

							<!-- <view class="flex-row justify-center"> -->
							<view class="recharge-con-title1 flex-row items-center justify-center">
								<image class="recharge-icon"
									src="https://heigeng.axu9.com/images/membership-recharge-icon2.png" mode="">
								</image>
								<text class="suanli-title">算力</text>
								<text class="suanli-total">{{storeSuanliNumTotal}}</text>
							</view>
							<view class="flex-row items-center">
								<!-- <u-number-box v-model="rechargeNum" @change="rechargeNumChange"></u-number-box> -->
								<numberBox @change="rechargeNumChange" :width="'60'"></numberBox>
							</view>

							<!-- </view> -->
						</view>
						<view class="recharge-con-btm flex-row justify-center items-end">
							<text class="recharge-con-btm-text">价格</text>
							<text class="recharge-con-btm-unit">￥</text>
							<view class="flex-row items-end">
								<text class="recharge-con-btm-price">{{rechargeMoney}}</text>
								<text class="youhui-text" v-if="rechargeTabs == 1">(优惠{{youhuiMoney}}元)</text>
							</view>
							
						</view>
					</view>
				</view>
				<!-- 会员权益 -->
				<view class="quanyi">
					<view class="quanyi-title">
						{{current == 0 ? '充值说明' : '会员权益'}}
					</view>
					<view class="quanyi-item flex-row w100">
						<view class="quanyi-list-left flex-row items-center">
							<image class="quanyi-icon" src="https://heigeng.axu9.com/images/quanyi-icon1.png"
								mode=""></image>
						</view>
						<view class="quanyi-list-rg flex-col" v-if="current == 1">
							<text class="quanyi-list-rg-title">{{intergel}}算力</text>
							<text class="quanyi-list-rg-desc">约60分钟视频生成时长，有效期内用完可自助加购</text>
						</view>
						<view class="quanyi-list-rg flex-row items-center" v-if="current == 0 && rechargeTabs == 0">
							<!-- <text class="quanyi-list-rg-title">音色</text> -->
							<text class="quanyi-list-rg-desc1">音色克隆购买后可以修改8次，每次修改会覆盖前一次音色无法找回。</text>
						</view>
						<view class="quanyi-list-rg flex-row items-center" v-if="current == 0 && rechargeTabs == 1">
							<!-- <text class="quanyi-list-rg-title">算力</text> -->
							<text class="quanyi-list-rg-desc1">算力是生成视频的点数，1秒1点算力，不足1秒按1点算力计算。</text>
						</view>
					</view>
					<view class="quanyi-item flex-row w100">
						<view class="quanyi-list-left flex-row items-center">
							<image class="quanyi-icon" src="https://heigeng.axu9.com/images/quanyi-icon2.png"
								mode=""></image>
						</view>
						<view class="quanyi-list-rg flex-col" v-if="current == 1">
							<text class="quanyi-list-rg-title">音色克隆{{yinseNum}}个</text>
							<text class="quanyi-list-rg-desc">约60分钟视频生成时长，有效期内用完可自助加购</text>
						</view>
						<view class="quanyi-list-rg flex-row items-center" v-if="current == 0 && rechargeTabs == 0">
							<!-- <text class="quanyi-list-rg-title">音色1</text> -->
							<text class="quanyi-list-rg-desc1">克隆音色购买后不退换</text>
						</view>
						<view class="quanyi-list-rg flex-row items-center" v-if="current == 0 && rechargeTabs == 1">
							<!-- <text class="quanyi-list-rg-title">算力1</text> -->
							<text class="quanyi-list-rg-desc1">算力充值后可不退换</text>
						</view>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="page-bottom flex-col items-center">
					<view v-if="!isLoading" class="bottom-btn" @click="payMent">
						同意协议并支付￥{{money}}元
					</view>
					<view v-if="isLoading" class="bottom-btn">
						同意协议并支付￥{{money}}元
					</view>
					<view class="agreement flex-row items-center">
						<image @click="selectAgree" v-if="isCheched" class="select-icon"
							src="https://heigeng.axu9.com/images/membership-checked.png" mode=""></image>
						<image @click="selectAgree" v-if="!isCheched" class="select-icon"
							src="https://heigeng.axu9.com/images/membership-unchecked.png" mode=""></image>
						<text class="agreement-text1">已阅读并同意</text>
						<text @click="toAgreement" class="agreement-text2">《{{AgreeTitle}}》</text>
					</view>
				</view>
			</view>
		</view>
		<!-- ios支付联系客服弹窗 -->
		<custom-pop ref="custompop"></custom-pop>
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import numberBox from "../../components/numBox/index.vue";
	import customPop from "../../components/customPop/index.vue";
	import {
		getUserinfo,
		buyHuiyuan,
		getPackage,
		createOrder,
		payOrder,
		isPgPay
	} from "@/api/user.js"
	import {
		getAgreement
	} from "@/api/video.js"
	export default {
		components: {
			numberBox,
			customPop
		},
		data() {
			return {
				avatar: 'https://heigeng.axu9.com/images/avatar.png', //头像
				nickname: '微信用户',
				current: 0, //当前选项 0套餐 1充值
				currentT: -1, //当前套餐
				level: 0, //身份 0普通用户 1激活用户 2银牌 3金牌
				score: 0, //积分
				mobile: '', //手机号
				userId: '',
				taocanList: [
					// {
					// 	title: '月会员',
					// 	price: '0',
					// 	yinseNum: '0',
					// 	intergel: '0'
					// },
					// {
					// 	title: '季会员',
					// 	price: '0',
					// 	yinseNum: '0',
					// 	intergel: '0'
					// },
					{
						title: '年会员',
						price: '0',
						yinseNum: '1',
						intergel: '0'
					}
				],
				isCheched: false,
				rechargeTabsList: ['音色', '算力'],
				rechargeTabs: 0,
				yinseNum: 0, //音色个数
				intergel: 0, //算力
				money: 0,
				storeSuanliNum: 0, //一份算力值
				storeSuanliPrice: 0, //一份算力钱
				rechargeMoney: 0, //充值金额
				rechargeNum: 0, //充值分数
				storeSuanliPrice: 0, //一份算力金额
				storeYinsePrice: 0, //一份音色金额
				storeSuanliNumTotal: 0, //总算力数
				isLoading: false, //防止重复点击
				// customPop: true,//客服弹窗
				platform: '', //手机系统类型 
				// customIsLoading: false,//客服弹窗确定防止重复点击
				isWechatPayIos: true, //iOS true微信支付 false客服弹窗
				AgreeTitle: '好多个你协议',
				youhuiMoney: 0,//优惠金额
				commonData: {}
			}
		},
		onLoad() {
			this.commonData = commonData;
			this.getUserinfo();
			this.getBuyHuiyuan();
			this.getTaocan();
			this.getSystemInfo();
			this.getIsPgPay();
			this.getXieyi();
		},
		methods: {
			// 跳转到协议
			toAgreement() {
				uni.navigateTo({
					url: '/pagesMine/agreement/index?type=3'
				})
			},
			// 开通会员协议
			getXieyi() {
				getAgreement({
					id: 3
				}).then(res => {
					if (res.errno == 0) {
						this.AgreeTitle = res.data.title;
					}
				})
			},
			getIsPgPay() {
				isPgPay().then(res => {

					if (res.errno == 0) {
						this.isWechatPayIos = res.data == 1 ? true : false;
						console.log(this.isWechatPayIos, 'this.isWechatPayIos')
					}

				})
			},
			// 获取手机系统信息
			getSystemInfo() {
				var _this = this;
				uni.getSystemInfo({
					success: function(info) {
						console.log(info, 'info')
						_this.platform = info.platform;

					}
				});
			},
			// 初始化页面数值
			initData() {
				this.money = 0;
				this.storeSuanliNumTotal = 0;
				this.rechargeNum = 0;
				this.rechargeMoney = 0;
				this.current = 0;
				this.currentT = -1;
				this.rechargeTabs = 0;
				this.isCheched = false;
			},
			// 获取代理商套餐积分(算力)
			getTaocan() {
				getPackage().then(res => {
					console.log(res, 'ffffff');
					if (res.errno == 0) {
						let info = res.data;
						// this.taocanList[0].intergel = info.yue;
						// this.taocanList[1].intergel = info.ji;
						// this.taocanList[2].intergel = info.nian;
						this.taocanList[0].intergel = info.nian;
					}

				}).catch(err => {

				})
			},
			// 充值tabs切换
			changeRechargTabs(index) {
				this.rechargeTabs = index;
				this.rechargeNum = 0;
				this.rechargeMoney = 0;
				this.money = 0;
				this.storeSuanliNumTotal = 0;
			},
			rechargeNumChange(e) {
				// console.log(e,'rechargeNumChange')
				let num = e;
				this.rechargeNum = num;
				console.log(num, 'rechargeNumChange1')
				if (this.rechargeTabs == 0) {
					this.rechargeMoney = this.storeYinsePrice * num;
					this.money = this.storeYinsePrice * num;
				} else if (this.rechargeTabs == 1) {
					if(this.level == 1){
						this.rechargeMoney = this.storeSuanliPrice * num;
						this.money = this.storeSuanliPrice * num;
					}else if(this.level == 2){
						this.rechargeMoney = Math.floor(this.storeSuanliPrice * num * 0.9);
						this.money = Math.floor(this.storeSuanliPrice * num * 0.9);
						this.youhuiMoney = Math.floor(this.storeSuanliPrice * num * 0.1);
					}else if(this.level == 3){
						this.rechargeMoney = Math.floor(this.storeSuanliPrice * num * 0.8);
						this.money = Math.floor(this.storeSuanliPrice * num * 0.8);
						this.youhuiMoney = Math.floor(this.storeSuanliPrice * num * 0.2);
					}
					
					this.storeSuanliNumTotal = this.storeSuanliNum * num;
				}
				// console.log(e.value,this.rechargeNum,'rechargeNumChange')
				// let num = e.value;
				// this.rechargeNum = num;
				// console.log(e.value,this.rechargeNum,'rechargeNumChange1')
				// if(this.rechargeTabs == 0){
				// 	this.rechargeMoney = this.storeYinsePrice * num;
				// 	this.money = this.storeYinsePrice * num;
				// }else if(this.rechargeTabs == 1){
				// 	this.rechargeMoney = this.storeSuanliPrice * num;
				// 	this.money = this.storeSuanliPrice * num;
				// 	this.storeSuanliNumTotal = this.storeSuanliNum * num;
				// }
			},
			// 勾选协议
			selectAgree() {
				this.isCheched = !this.isCheched;
			},
			// 微信支付
			payMent() {
				// if(!this.isCheched){
				// 	uni.showToast({
				// 		title: '请勾选协议',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (!this.isCheched) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					})

				}
				this.isCheched = true;
				if (this.money == 0) {
					uni.showToast({
						title: '订单金额不正确',
						icon: 'none'
					})
					return
				}
				// if (this.platform == 'android') {
				//   console.log('Android系统');
				//   // Android特有的代码
				//   this.createOrder();
				// } else if (this.platform == 'ios') {
				//   console.log('iOS系统');
				//   // iOS特有的代码
				//   this.$refs.custompop.open();
				// }
				if (this.platform == 'ios') {
					if(this.isWechatPayIos){
						this.createOrder();
					}else {
						this.$refs.custompop.open();
					}
					
				} else {
					this.createOrder();
				}

			},
			// 创建订单
			createOrder() {
				if(this.isLoading){
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				// let info = {
				// 	uid: uni.getStorageSync("userId"),
				// 	type: this.current == 0 ? '1' : '2',//类型 1充值 2套餐
				// 	c_type: this.current == 0 && this.rechargeTabs == 0 ? '1' : this.current == 0 && this.rechargeTabs == 1 ? '2' : '',//充值类型 1买音色 2买算力
				// 	c_num: this.rechargeNum,//充值数量
				// 	price: this.money,//支付金额
				// 	t_type: this.currentT == 0 ? '3' : '',//套餐类型 1月 2季 3年
				// }
				// console.log(info,'info');
				// return
				uni.showLoading({
					title: '创建订单中'
				})
				this.isLoading = true;

				createOrder({
					uid: uni.getStorageSync("userId"),
					type: this.current == 0 ? '1' : '2', //类型 1充值 2套餐
					c_type: this.current == 0 && this.rechargeTabs == 0 ? '1' : this.current == 0 && this
						.rechargeTabs == 1 ? '2' : '', //充值类型 1买音色 2买算力
					c_num: this.rechargeNum, //充值数量
					price: this.money, //支付金额
					t_type: this.currentT == 0 ? '3' : '', //套餐类型 1月 2季 3年
				}).then(res => {
					console.log(res, 'createOrder')

					if (res.errno == 0) {
						// uni.showToast({
						// 	title: '成功',
						// 	icon: 'none'
						// })
						var orderId = res.data;
						this.getWechatPayInfo(orderId);
					} else {
						uni.hideLoading();
						this.isLoading = false;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}


				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			// 微信支付
			wechatPay(info) {
				console.log(info, 'wechatPay')
				var _this = this;
				uni.requestPayment({
					timeStamp: info.timeStamp,
					nonceStr: info.nonceStr,
					package: info.package,
					signType: info.signType,
					paySign: info.paySign,

					success(res) {
						console.log('成功：', res)
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.hideLoading();
							_this.isLoading = false;
							uni.switchTab({
								url: '/pages/mine/index'
							})
						}, 1000)


					},

					fail(res) {
						console.log('失败：', res)
						uni.hideLoading();
						_this.isLoading = false;
						uni.showToast({
							title: '失败',
							icon: 'none'
						})
					}
				});
			},
			// 获取微信支付信息
			getWechatPayInfo(orderId) {
				payOrder({
					uid: uni.getStorageSync("userId"),
					order_id: orderId
				}).then(res => {

					if (res.errno == 0) {
						console.log(res, '获取支付信息')
						this.wechatPay(res.data.payInfo)
					} else {
						uni.hideLoading();
						this.isLoading = false;
					}
				})
			},
			// 获取会员配置信息
			getBuyHuiyuan() {
				buyHuiyuan().then(res => {
					console.log(res, 'ffffff');
					if (res.errno == 0) {
						let info = res.data;
						// this.taocanList[0].price = info.taocan.price[0];
						// this.taocanList[1].price = info.taocan.price[1];
						// this.taocanList[2].price = info.taocan.price[2];
						this.taocanList[0].price = info.taocan.price[2];
						this.storeSuanliNum = info.store_suanli_num;
						this.storeSuanliPrice = info.store_suanli_price;
						this.storeYinsePrice = info.store_yinse_price;
					}
				})
			},
			// 切换套餐
			changeTaocan(item, index) {
				this.currentT = index;
				this.intergel = item.intergel;
				this.yinseNum = item.yinseNum;
				this.money = item.price;
				// if(index == 2){
				// 	this.currentT = index;
				// 	this.intergel = item.intergel;
				// 	this.yinseNum = item.yinseNum;
				// 	this.money = item.price;
				// }else {
				// 	uni.showToast({
				// 		title: '该套餐暂未开放',
				// 		icon: 'none'
				// 	})
				// }

			},
			// 切换tabs
			changeTabs(index) {
				console.log(index, 'indexs')
				this.current = index;
				this.money = 0;
				this.currentT = -1;
				this.rechargeTabs = 0;
				this.yinseNum = 0;
				this.intergel = 0;
				this.rechargeMoney = 0;
			},
			// 获取用户信息
			getUserinfo() {
				getUserinfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, 'getUserinfo')
					this.avatar = res.data.avatarUrl;
					this.nickname = res.data.nickName;
					this.score = res.data.integral;
					this.level = res.data.level_id;
					this.mobile = res.data.mobile;
					this.userId = res.data.id;
					uni.setStorageSync('mobile', res.data.mobile);
				}).catch(err => {

				})
			},
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .recharge-con-top .u-number-input {
		background-color: rgba(0, 0, 0, 0) !important;
		font-weight: 600 !important;
		font-size: 40rpx !important;
		color: #151515;
		width: 139rpx !important;
	}

	/deep/ .recharge-con-top1 .u-number-input {
		background-color: rgba(0, 0, 0, 0) !important;
		font-weight: 600 !important;
		font-size: 40rpx !important;
		color: #151515;
		width: 60rpx !important;
	}

	/deep/ .recharge-con .u-icon-disabled {
		background-color: rgba(0, 0, 0, 0) !important;
		border: 1rpx solid #DDDDDD !important;
		border-radius: 4rpx !important;
		width: 39rpx !important;
		height: 39rpx !important;
		font-size: 0 !important;
	}

	/deep/ .recharge-con .u-icon-minus {
		background-color: rgba(0, 0, 0, 0) !important;
		border: 1rpx solid #DDDDDD !important;
		border-radius: 4rpx !important;
		width: 39rpx !important;
		height: 39rpx !important;
		font-size: 0 !important;
	}

	/deep/ .recharge-con .u-icon-plus {
		background-color: rgba(0, 0, 0, 0) !important;
		border: 1rpx solid #DDDDDD !important;
		border-radius: 4rpx !important;
		width: 39rpx !important;
		height: 39rpx !important;
		font-size: 0 !important;
	}
</style>

<style>
	@import url(../../static/css/common.css);

	page {
		background-color: #fff;
		background-image: url('https://heigeng.axu9.com/images/mine-top-bg1.png');
		background-size: 100% 717rpx;
		background-repeat: no-repeat;
	}

	.ml-13-5 {
		margin-left: 27rpx;
	}

	.member-info {
		width: 90%;
		margin: 0 auto;
	}

	.avatar-wrap {
		width: 138rpx;
		height: 138rpx;
		background: #ffffff;
		box-shadow: 0 0 38rpx 11rpx #bebebe1a;
		border-radius: 50%;
	}

	.image_2 {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
	}

	.font {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		font-weight: 500;
		color: #111111;
		width: 500rpx;
		height: 34rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.user-level-img {
		width: 35rpx;
		height: 37rpx;
	}

	.user-level-btn {
		background-image: linear-gradient(100deg, #2d94fd 0%, #baf7fc 100%);
		border-radius: 16rpx;
		width: 118rpx;
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-top: 20rpx;
		margin-left: -6rpx;

	}

	.user-level-btn-yin {
		background-image: url('https://heigeng.axu9.com/images/yinpai-icon-blue.png');
		width: 101rpx;
		height: 37rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 20rpx;
		margin-top: 21rpx;
	}

	.user-level-btn-jin {
		background-image: url('https://heigeng.axu9.com/images/jinpai-icon.png');
		width: 101rpx;
		height: 37rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 20rpx;
		margin-top: 21rpx;
	}

	.mobile {
		background-color: rgba(0, 0, 0, 0);
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		color: #03CC6D;
		margin-left: 1px;
		border: 1px solid #02FF83;
		margin-top: 10px;
		border-radius: 26px;
		font-size: 11px;
		padding: 0 10rpx;
	}

	.content {
		margin-top: 20rpx;
	}

	.taocan {
		background-image: linear-gradient(-90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		width: 374rpx;
		/* width: 50%; */
		height: 76rpx;
		color: #fff;
	}

	.recharge {
		width: 421rpx;
		height: 126rpx;
		background-image: url('https://heigeng.axu9.com/images/tabs-open-membership-bg1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #333;
		margin-left: -45rpx;
		padding-top: 30rpx;
	}

	.recharge1 {
		width: 421rpx;
		height: 126rpx;
		background-image: url('https://heigeng.axu9.com/images/tabs-open-membership-bg2.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #333;
		/* margin-right: 45rpx; */
		padding-top: 30rpx;
		z-index: 99;
	}

	.ml-45 {
		margin-left: -45rpx;
		z-index: 1;
	}

	.option {
		background-color: #fff;
		padding: 40rpx 54rpx;
	}

	.list-item-unactive {
		/* width: 201rpx; */
		width: 30%;
		height: 245rpx;
		border-radius: 20rpx;
		border: 1rpx solid #DDDDDD;
	}

	.list-item {
		margin-right: 5%;
	}

	.list-item:last-child {
		margin-right: 0;
	}

	.list-item-active {
		/* width: 201rpx; */
		width: 30%;
		height: 245rpx;
		border-radius: 20rpx;
		border: 3rpx solid #151515;
	}

	.list-item-top {
		height: calc(100% - 52rpx);
	}

	.money-unit {
		margin-bottom: 10rpx;
	}

	.money-num {
		font-weight: 500;
		font-size: 56rpx;
		color: #151515;

	}

	.title {
		color: #151515;
		font-size: 24rpx;
		font-weight: 600;
	}

	.old-price {

		color: #999999;
		font-weight: 400;
		font-face: PingFang SC;
		font-size: 20rpx;

	}

	.old-price-num {
		text-decoration: line-through;
	}

	.bottom-active {
		width: 100%;
		height: 52rpx;
		background-color: #ebfdf6;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 52rpx;
		font-weight: 600;
		color: #151515;
	}

	.bottom-unactive {
		width: 100%;
		height: 52rpx;
		background-color: #eff3f4;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 52rpx;
		font-weight: 500;
		color: #999999;
	}

	.bottom {}

	.recharg-option {
		background-color: #fff;
		padding: 40rpx 54rpx;
	}

	.recharge-con {
		width: 617rpx;
		height: 255rpx;
		border-radius: 20rpx;
		border: 3rpx solid #151515;
		margin-top: 40rpx;
	}

	.recharge-con-top {
		height: calc(100% - 90rpx);
	}

	.recharge-con-top1 {
		height: calc(100% - 90rpx);
		padding-top: 24rpx;
		padding-bottom: 26rpx;
	}

	.recharge-con-btm-text {
		margin-bottom: 10rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #151515;
	}

	.recharge-con-btm-unit {
		margin-bottom: 10rpx;
		margin-left: 8rpx;
		margin-right: 8rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #151515;
	}

	.recharge-con-btm {
		width: 100%;
		border-radius: 0 0 20rpx 20rpx;
		height: 90rpx;
		background-color: #ebfdf6;
	}

	.recharge-con-btm-price {
		font-weight: 600;
		font-size: 56rpx;
		color: #151515;
	}
	.youhui-text {
		color: #fbc64a;
		font-weight: 500;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.recharge-con-title {
		font-weight: 600;
		font-size: 24rpx;
		color: #151515;
		padding-top: 24rpx;
		padding-bottom: 26rpx;

	}

	.recharge-con-title1 {
		font-weight: 600;
		font-size: 24rpx;
		color: #151515;
		margin-right: 30rpx;

	}

	.recharge-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 6rpx;
	}

	.suanli-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #151515;
	}

	.suanli-total {
		font-size: 40rpx;
		font-weight: 600;
		color: #151515;
	}

	.tabs-recharge-item {
		width: 200rpx;
		color: #777777;
		font-weight: 400;
		font-size: 30rpx;
	}

	.recharge-tabs-active {
		position: relative;
		color: #151515;
		font-size: 30rpx;
		font-weight: 600;
	}

	.recharge-tabs-active::after {
		position: absolute;
		content: "";
		width: 29rpx;
		height: 6rpx;
		border-radius: 3rpx;
		background: linear-gradient(-90deg, #00e487, #06ceba);
		bottom: -16rpx;
		left: 50%;
		transform: translateX(-50%);

	}



	.quanyi {
		padding: 0 45rpx;
	}

	.w100 {
		width: 100%;
	}

	.quanyi-title {
		font-weight: 600;
		font-size: 32rpx;
		text-align: left;
		color: #151515;
		margin-bottom: 24rpx;
	}

	.quanyi-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.quanyi-item {
		padding: 21rpx 0;
	}

	.quanyi-list-rg {
		width: calc(100% - 80rpx);
		margin-left: 16rpx;
	}

	.quanyi-list-rg-title {
		font-weight: 600;
		font-size: 28rpx;
		text-align: left;
		color: #151515;
		margin-bottom: 13rpx;
	}

	.quanyi-list-rg-desc {
		font-weight: 400;
		font-size: 22rpx;
		text-align: left;
		color: #999999;
	}

	.quanyi-list-rg-desc1 {
		font-weight: 500;
		font-size: 26rpx;
		text-align: left;
		color: #151515;
		width: 100%;
	}

	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		padding: 20rpx 0 60rpx 0;
		width: 100%;
	}

	.bottom-btn {
		width: 690rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: linear-gradient(-90deg, #00ccbb, #00e586);
		font-weight: 600;
		font-size: 32rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 100rpx;
		margin-bottom: 37rpx;
	}

	.select-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.agreement-text1 {
		color: #999999;
		font-weight: 400;
		font-face: PingFang SC;
		font-size: 24rpx;
	}

	.agreement-text2 {
		color: #00db9c;
		font-weight: 500;
		font-face: PingFang SC;
		font-size: 24rpx;
	}
</style>